<template>
    <el-dialog
    title="新增彩票"
    :visible.sync="showAddView"
    width="40%"
    :before-close="handleClose">
    <el-form :model="gameInfo" :rules="rules" ref="gameInfo">
        <table>
            <tr>
                <td>彩票英文名</td>
                <td>
                    <el-form-item prop="en">
                        <el-input v-model="gameInfo.en"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>彩票中文名</td>
                <td>
                    <el-form-item prop="cn">
                        <el-input v-model="gameInfo.cn"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>icons</td>
                <td>
                    <ul style="display:flex;">
                        <el-form-item prop="smIcon">
                            <label for="smIcon"  style="width:40px;height:40px;font-size:12px" ref="smIcon"> <i class="el-icon-plus"></i></label>
                            <input type="file" id="smIcon" title="asdfa" @change="selectFile(40,40,$event)" name="icon">
                        </el-form-item>  
                         <span style="font-size:14px">请上传40x40大小的图片</span>

                    </ul>
                </td>
            </tr>
            <tr>
                <td>icons</td>
                <td>
                    <ul style="display:flex;">
                        <el-form-item prop="bigIcon">
                        <label for="bigIcon"  style="width:90px;height:90px" ref="bigIcon"> <i class="el-icon-plus"></i></label>
                        <input type="file" id="bigIcon" title="asdfa" @change="selectFile(90,90,$event)" name="icon">
                        </el-form-item>
                    </ul>
                </td>
            </tr>
        </table>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="addNewGame">确 定</el-button>
    </span>
    </el-dialog>
</template>
<script>
import axios from 'axios'
export default {
    props: ['showAddView'],
    data(){
        return {
            uploadFiles: [],
            gameInfo:{
            	smIcon:'',
            	bigIcon:''
            },
            rules: {
                en: [
                    {required: true,message:'请输入彩票的英文名',trigger:'blur'},
                    {min:2,message:'最少输入两个字符',trigger:'blur'}
                ],
                cn: [
                    {required: true,message:'请输入彩票的英文名',trigger:'blur'},
                    {min:2,message:'最少输入两个字符',trigger:'blur'}
                ],
                smIcon: [
                    {required: true,message:'请选择图片',trigger:'change'},
                ],
                bigIcon: [
                    {required: true,message:'请选择图片',trigger:'change'},
                ]
            }
        }
    },
    methods: {
        handleClose(){
            var smIcon = this.$refs.smIcon;
            var bigIcon = this.$refs.bigIcon;
            smIcon.innerHTML = '<i class="el-icon-plus"></i>';
            bigIcon.innerHTML ='<i class="el-icon-plus"></i>';
            this.$refs['gameInfo'].resetFields();
            this.uploadFiles = [];
            this.$parent.showAddView = false;
        },
        addNewGame(){
            this.$refs['gameInfo'].validate((valid) => {
	            if (valid) {
	                var fd = new FormData();
	                for(var i=0;i<this.uploadFiles.length;i++){
	                    fd.append("file",this.uploadFiles[i]);
	                }
	                // fd.append("file",this.uploadFiles[0]);
	                fd.append('en',this.gameInfo.en);
	                fd.append('cn',this.gameInfo.cn);
	                let config = {  
	                    headers:{'Content-Type':'multipart/form-data'}  
	                };
	            
	                axios.post(this.$apis.addNewGame,fd,config)
	                .then((resp)=>{
	                    console.log(resp);
	                    console.log(resp.message);
	                    this.$message({
	                        message: resp.data.message,
	                        type: resp.data.success?'success':'danger'
	                    });
	                    if(resp.data.success){
	                        this.$store.dispatch('loadAllGames')
	                    }
	                    //请求添加成功之后,重新发起请求,获取彩种的列表
	                    this.handleClose();
	                }).catch((error)=>{
	                    console.log(error);
	                })
	            }else{
	                console.log('error submit!!');
	                return false;
	            }
        	});
    	},
        //打开图片选择和裁剪界面
        selectFile(width,height,event){
            console.log("宽为"+width);
            var e = event || window.event;
            let file = e.target.files[0];
            var url = this.getObjectURL(file);
            var image = new Image();
            image.src = url;
            image.onload = ()=>{
                if(image.width!=width||image.height!=height){
                    alert(`请上传尺寸为宽${width},高${height}的图片`);
                }else{
                    if(width==40){
                        this.uploadFiles.push(file);
                        var smIcon = this.$refs.smIcon;
                        smIcon.innerHTML=image.outerHTML;
                        this.gameInfo.smIcon = true;
                    }
                    if(width==90){
                        console.log("宽度为"+width);
                        this.uploadFiles.push(file);
                        var bigIcon = this.$refs.bigIcon;
                        console.log(this.$refs);
                        bigIcon.innerHTML=image.outerHTML;
                        this.gameInfo.bigIcon = true;
                    }
                }
            }
            //文件预览
            console.log(file);
        },
        //取得该文件的url 
        getObjectURL(file) { 
        　		var url = null ; 
		        　if (window.createObjectURL!=undefined) { 
		        　　　　url = window.createObjectURL(file) ; 
		        　} else if (window.URL!=undefined) { 
		        　　　　url = window.URL.createObjectURL(file) ; 
		        　} else if (window.webkitURL!=undefined) { 
		        　　　　url = window.webkitURL.createObjectURL(file) ; 
		        　} 
		        　return url ; 
		    }
		}
	}
</script>
<style lang="scss" scoped>
    label {
      padding: 0 5px;
      font-size: 30px;
      border-radius: 5px;
      color: #333;
      border: 1px dashed #ccc;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #smIcon,#bigIcon {
      display: none;
      margin-top: 100px;
    }
</style>
